@airbrake/browser

Official Airbrake Notifier for Browsers

The official Airbrake notifier for capturing JavaScript errors in web browsers and reporting them to Airbrake. If you're looking for Node.js support, there is a separate package.

Installation

Using yarn:

yarn add @airbrake/browser

Using npm:

npm install @airbrake/browser

Using a <script> tag via jsdelivr:

<script src="https://cdn.jsdelivr.net/npm/@airbrake/browser"></script>

Using a <script> tag via unpkg:

<script src="https://unpkg.com/@airbrake/browser"></script>

Basic Usage

First, initialize the notifier with the project ID and project key taken from Airbrake. To find your project_id and project_key navigate to your project's Settings and copy the values from the right sidebar:

import { Notifier } from '@airbrake/browser';

const airbrake = new Notifier({
  projectId: 1,
  projectKey: 'REPLACE_ME',
  environment: 'production',
});

Then, you can send a textual message to Airbrake:

let promise = airbrake.notify(`user id=${user_id} not found`);
promise.then((notice) => {
  if (notice.id) {
    console.log('notice id', notice.id);
  } else {
    console.log('notify failed', notice.error);
  }
});

or report errors directly:

try {
  throw new Error('Hello from Airbrake!');
} catch (err) {
  airbrake.notify(err);
}

Alternatively, you can wrap any code which may throw errors using the wrap method:

let startApp = () => {
  throw new Error('Hello from Airbrake!');
};
startApp = airbrake.wrap(startApp);

// Any exceptions thrown in startApp will be reported to Airbrake.
startApp();

or use the call shortcut:

let startApp = () => {
  throw new Error('Hello from Airbrake!');
};

airbrake.call(startApp);

Example configurations

• AngularJS
• Angular
• Legacy
• Rails
• React
• Redux
• Vue.js

Advanced Usage

Notice Annotations

It's possible to annotate error notices with all sorts of useful information at the time they're captured by supplying it in the object being reported.

try {
  startApp();
} catch (err) {
  airbrake.notify({
    error: err,
    context: { component: 'bootstrap' },
    environment: { env1: 'value' },
    params: { param1: 'value' },
    session: { session1: 'value' },
  });
}

Severity

Severity allows categorizing how severe an error is. By default, it's set to error. To redefine severity, simply overwrite context/severity of a notice object:

airbrake.notify({
  error: err,
  context: { severity: 'warning' },
});

Filtering errors

There may be some errors thrown in your application that you're not interested in sending to Airbrake, such as errors thrown by 3rd-party libraries, or by browser extensions run by your users.

The Airbrake notifier makes it simple to ignore this chaff while still processing legitimate errors. Add filters to the notifier by providing filter functions to addFilter.

addFilter accepts the entire error notice to be sent to Airbrake and provides access to the context, environment, params, and session properties. It also includes the single-element errors array with its backtrace property and associated backtrace lines.

The return value of the filter function determines whether or not the error notice will be submitted.

• If null is returned, the notice is ignored.
• Otherwise, the returned notice will be submitted.

An error notice must pass all provided filters to be submitted.

In the following example all errors triggered by admins will be ignored:

airbrake.addFilter((notice) => {
  if (notice.params.admin) {
    // Ignore errors from admin sessions.
    return null;
  }
  return notice;
});

Filters can be also used to modify notice payload, e.g. to set the environment and application version:

airbrake.addFilter((notice) => {
  notice.context.environment = 'production';
  notice.context.version = '1.2.3';
  return notice;
});

Filtering keys

With the keysBlocklist option, you can specify a list of keys containing sensitive information that must be filtered out:

const airbrake = new Notifier({
  // ...
  keysBlocklist: [
    'password', // exact match
    /secret/, // regexp match
  ],
});

Source maps

Airbrake supports using private and public source maps. Check out our docs for more info:

• Private source maps
• Public source maps

Instrumentation

@airbrake/browser automatically instruments console.log function calls in order to collect logs and send them with the first error. You can disable that behavior using the instrumentation option:

const airbrake = new Notifier({
  // ...
  instrumentation: {
    console: false,
  },
});

APM

Routes

import { Notifier } from '@airbrake/browser';

const airbrake = new Notifier({
  projectId: 1,
  projectKey: 'REPLACE_ME',
  environment: 'production',
});

const routeMetric = this.airbrake.routes.start(
  'GET', // HTTP method name
  '/abc', // Route name
  200, // Status code
  'application/json' // Content-Type header
);
this.airbrake.routes.notify(routeMetric);

Queries

import { Notifier } from '@airbrake/browser';

const airbrake = new Notifier({
  projectId: 1,
  projectKey: 'REPLACE_ME',
  environment: 'production',
});

const queryInfo = this.airbrake.queries.start('SELECT * FROM things;');
queryInfo.file = 'file.js';
queryInfo.func = 'callerFunc';
queryInfo.line = 21;
queryInfo.method = 'GET';
queryInfo.route = '/abc';

this.airbrake.queries.notify(queryInfo);

Queues

import { Notifier } from '@airbrake/browser';

const airbrake = new Notifier({
  projectId: 1,
  projectKey: 'REPLACE_ME',
  environment: 'production',
});

const queueInfo = this.airbrake.queues.start('FooWorker');
this.airbrake.queues.notify(queueInfo);

Changelog

[2.1.8] (December 6, 2022)

browser

• Fixed relative import issues with Yarn's Plug'n'Play feature (#1135)
• Stop filtering the context field in the notice payload. This payload contains service information and it should never be modified (#1325)
• Bumped cross-fetch dependency to ^3.1.5 (fixes a Dependabot security alert) (#1322)